<template>
  <main id="main" ref="main" style="width: 100%;height:100%;"></main>
</template>

<script lang="js">
const echarts = require("echarts")
export default {
  name: "cBar",
  props: {
    lineData: {
      type: Object,
      default: () => ({})
    },
    yAxisName: {
      type: String,
      default: ""
    },
    titleConfig: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  mounted() {
    const chart = echarts.init(this.$refs['main']);
    const markLine = [];
    for (const index in this.lineData[this.titleConfig[0].key]) {
      markLine.push([
        {
          coord: [Number(index), this.lineData[this.titleConfig[0].key][Number(index)]]
        }, {
          coord: [Number(index), this.lineData[this.titleConfig[1].key][Number(index)]],
        }])
    }
    const option = {
      tooltip: {},
      legend: {
        data: this.titleConfig.map(item => item.name),
        top: "2%",
        left: '6%'
      },
      grid: {
        top: '15%',
        left: '0%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: this.lineData.xAxis,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#484D78',
              fontSize: 12
            }
          }
        }
      ],
      yAxis: [
        {
          name: this.yAxisName,
          nameLocation: "end",
          nameGap: 10,
          nameTextStyle: {
            align: "right"
          },
          splitArea: {show: false},
          type: 'value',
          axisLabel: {
            textStyle: {
              align: 'right',
              color: '#484D78',
              fontSize: 12
            }
          }
        }
      ],
      series: [
        {
          name: this.titleConfig[0].name,
          type: 'line',
          lineStyle: {
            color: "#5467E6"
          },
          data: this.lineData[this.titleConfig[0].key]
        },
        {
          name: this.titleConfig[1].name,
          type: 'line',
          lineStyle: {
            type: 'dashed',
            color: "#55EFD3"
          },
          data: this.lineData[this.titleConfig[1].key]
        },
        {
          name: this.titleConfig[2].name,
          type: 'line',
          symbolSize: 6,
          lineStyle: {
            type: 'dashed',
            color: "#E00703",
            opacity: 0
          },
          itemStyle: {
            show: false,
            opacity: 0
          },
          markLine: {
            data: markLine,
            label: {
              distance: [10, 8]
            },
            lineStyle: {
              color: "#E00703",
              type: 'solid',
              width: 2
            },
          },
          data: this.lineData[this.titleConfig[0].key].map((item, index) => (item - this.lineData[this.titleConfig[1].key][index]).toFixed(2))
        },
      ]
    };
    chart.setOption(option);
  }
}
</script>

<style scoped lang="stylus">

</style>
